<template>
  <div class="pug-ui-tab">
    <table>
      <thead>
      <tr>
        <th>id</th>
        <th>标题</th>
        <th>作者</th>
        <th>router-name的方式访问</th>
        <th>动态参数-params</th>
        <th>动态参数-query</th>
        <th>动态参数-props</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(book,index) in bookList" :key="book.id + index">
        <th>{{ book.id }}</th>
        <th>{{ book.title }}</th>
        <th>{{ book.author }}</th>
        <th>
          <router-link :to="{name:'bookdetails1',params:{id:book.id}}">查看明细1-params</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
          <router-link :to="{name:'bookdetails2',query:{id:book.id}}">查看明细1-query</router-link>
        </th>
        <th>
          <router-link :to="'/book/'+book.id">查看明细</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
          <a :href="'/book/'+book.id">查看明细a连接</a>
        </th>
        <th>
          <router-link :to="`/book2?id=${book.id}`">查看明细</router-link>&nbsp;&nbsp;&nbsp;&nbsp;
          <a :href="'/book2?id='+book.id">查看明细a连接</a>
        </th>
        <th>
          <router-link :to="`/bookdetail/${book.id}/${book.title}/${book.author}`">查看明细</router-link>
        </th>
      </tr>
      </tbody>
    </table>
  </div>
  <hr>
  <router-view></router-view>
</template>

<script>
import Book from "@/service/Book";

export default {
  name: "BookList",
  data() {
    return {
      bookList: Book
    }
  }
}
</script>

<style>
.pug-ui-tab {
  background: #eee;
  padding: 30px;
}

.pug-ui-tab table {
  width: 100%;
  border-collapse: collapse
}
.pug-ui-tab th,.pug-ui-tab td{text-align: left;border: 1px solid #666;padding: 5px}
</style>